/**
 * 运单管理列表作废弹窗
 * @author xiaoxujs
 */

import { Form, Input, message, Modal } from "antd";
import { FC, useState } from "react";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";
import { ITlplTPlanPlanCancellationFrom } from "../../../../../type/WaybillManagement/form";
import { getTlplTPlanPlanCancellation } from "../../../api";

const { TextArea } = Input;

const NullifyModule: FC<{
  open: boolean,
  handleNullifyCallback: () => void;
  id?: string;
}> = ({
  open,
  handleNullifyCallback,
  id
}) => {
    const [form] = Form.useForm<ITlplTPlanPlanCancellationFrom>();
    const { validateFields, resetFields } = form;
    const [confirmLoading, setConfirmLoading] = useState(false);

    const handleOk = async () => {
      if (id) {
        let values = await validateFields();
        setConfirmLoading(true)
        const params = {
          planId: id,
          reason: values.reason,
        }
        const { code, msg } = await getTlplTPlanPlanCancellation(params) as { code: number; msg: string };
        if (code === 20000) {
          message.success('废除成功')
          handleCancel()
        } else {
          message.error(msg);
        }

        setConfirmLoading(false)
      }
    };

    const handleCancel = () => {
      setConfirmLoading(false)
      resetFields()
      handleNullifyCallback();
    };
    return <Modal
      width={useWindowFontSize(488)}
      title='作废'
      open={open}
      onOk={handleOk}
      onCancel={handleCancel}
      confirmLoading={confirmLoading}
    >
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        form={form}
      >
        <Form.Item<ITlplTPlanPlanCancellationFrom>
          label="作废原因"
          name="reason"
          rules={[{ required: true, message: '请输入' }]}
        >
          <TextArea rows={4} />
        </Form.Item>
      </Form>
    </Modal>
  }

export default NullifyModule;